<template>
    <div class="topwidget">
        <div class="left">
            <map_button @click="openCoverage" v-if="widget.topwidget.coverage">
                <i class="fa fa-clone"></i>
                图层
            </map_button>
            <map_button @click="signMaps" v-if="widget.topwidget.sign">
                <i class="fa fa-thumb-tack"></i>
                标记地图
            </map_button>
            <el-autocomplete class="queryAddress" v-if="widget.topwidget.search" v-model="queryAddress" :fetch-suggestions="querySearchAsync" placeholder="请输入要查询的地址" @select="selectAddress">
                <template #default="{ item }">
                    <div class="value">
                        {{ item.name }}
                        <br />
                        <span class="link">{{ item.address }}</span>
                    </div>
                </template>
            </el-autocomplete>
        </div>
        <div class="right">
            <map_button class="btnList" v-if="widget.topwidget.back" @click="$router.back()"><i class="fa fa-mail-reply"></i> 返回 </map_button>
            <el-dropdown trigger="click" @command="handleCommand" v-if="widget.topwidget.tool">
                <map_button class="btnList">
                    <i class="fa fa-wrench btnsImages"></i>
                    矢量工具
                    <i class="fa fa-caret-down el-icon--right"></i>
                </map_button>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item v-for="item in tool" :key="item.name" :command="item">
                            <i :class="item.icon" class="itemIcon"></i>
                            {{ item.name }}
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>
<script lang="ts" setup>
import map_button from "@/components/button.vue";
import { ref } from "vue";
import { widget } from "@/utils/global";
import { tool } from "@/config/config";
import { querySearchAsync, handleSelect, handleCommand } from "@/utils/topwidget/topwidget";
import { signMaps } from "@/utils/loading";
// 搜索框数据
const queryAddress = ref("");
const selectAddress = (item: Record<string, any>) => {
    handleSelect(item, (res: any) => {
        queryAddress.value = res;
    });
};
const openCoverage = () => {
    widget.coverage = !widget.coverage;
};
</script>
